<template>
  <div>
    <!-- 公共头部 -->
    <header-tab></header-tab>
    <div v-for="(recommend,index) in recommends" :key="index">
      <img v-lazy="recommend.img" alt class="iiiimg" />
      <div class="contain">
        <p class="title">
          <b>{{recommend.title}}</b>
        </p>
        <p class="meta">
          <b>{{recommend.time}}</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          浏览
          <b>{{recommend.browse}}</b>回复
        </p>

        <!-- 用户 -->
        <div class="notes-author">
          <div class="author">
            <img v-lazy="recommend.headimg" alt />
            <span class="name">{{recommend.nickname}}</span>
            <span class="ppp">{{recommend.nu1}}篇游记，{{recommend.num2}}粉丝</span>
          </div>
          <span class="size5">{{recommend.place}}</span>
        </div>

        <!-- 正文 -->
        <p class="tttext">{{recommend.text}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      recommends: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.$axios.get("/recommend?id=" + this.id).then((res) => {
      this.recommends = res.data.result;
    });
  },
};
</script>

<style scoped>
.iiiimg {
  width: 100%;
}
.contain {
  width: 95%;
  margin: 5px auto;
}
.title {
  font-size: 30px;
}
.meta {
  height: 12px;
  font-size: 12px;
  margin: 10px 0;
}
.notes-author {
  width: 100%;
  height: 60px;
  margin: 20px 0 10px;
}
.author {
  width: 65%;
  height: 100%;
  float: left;
  position: relative;
  border-right: 1px solid#999999;
}
.author img {
  width: 60px;
  height: 60px;
}
.name {
  position: absolute;
  top: 0;
  left: 65px;
}
.ppp {
  position: absolute;
  top: 22px;
  left: 65px;
}
.size5 {
  width: 35%;
  line-height: 60px;
  display: inline-block;
  font-size: 19px;
  color: #474747;
  text-align: center;
}
.tttext {
  font-size: 20px;
}
</style>